<template>
	<div style="display:flex;flex-direction: column;flex:1;">
		<div class="container " style="margin-bottom:20px;">
			<p class="ms-title">
				快速访问
			</p>
			<Box></Box>
		</div>
		<div class="container" style="flex:1;">
			<div class="ms-title">
				最近文件
			</div>
			<el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
				<el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
				<el-table-column prop="name" label="文件名"></el-table-column>
				<el-table-column label="创建时间" prop="time">
				</el-table-column>
				<el-table-column prop="person" label="拟稿人"></el-table-column>
				<el-table-column label="操作" width="220" align="center">
					<template #default="scope">
						<el-button text :icon="Edit" @click="handleEdit(scope.$index, scope.row)" v-permiss="15">
							编辑
						</el-button>
						<el-button text :icon="Delete" class="red" @click="handleDelete(scope.$index)" v-permiss="16">
							删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pagination">
				<el-pagination
					background
					layout="total, prev, pager, next"
					:current-page="query.pageIndex"
					:page-size="query.pageSize"
					:total="pageTotal"
					@current-change="handlePageChange"
				></el-pagination>
			</div>
		</div>

		<!-- 编辑弹出框 -->
		<el-dialog title="编辑" v-model="editVisible" width="30%">
			<el-form label-width="70px">
				<el-form-item label="用户名">
					<el-input v-model="form.name"></el-input>
				</el-form-item>
				<el-form-item label="地址">
					<el-input v-model="form.person"></el-input>
				</el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="editVisible = false">取 消</el-button>
					<el-button type="primary" @click="saveEdit">确 定</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="basetable">
import { ref, reactive } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Delete, Edit, Search, Plus } from '@element-plus/icons-vue';
import { fetchData } from '../api/index';
import Box from './components/box.vue'
interface TableItem {
	id: number;
	name: string;
	money: string;
	state: string;
	date: string;
	person: string;
}

const query = reactive({
	person: '',
	name: '',
	pageIndex: 1,
	pageSize: 10
});


const tableData = [
{
	id:'1',
	name:'泥土之下抖音店铺文案v1.0',
	time:'2023/8/24 11:31:02',
	person:'阿谱up'
},
{
	id:'2',
	name:'泥土之下快手直播话术v1.0',
	time:'2023/8/23 16:01:29',
	person:'阿谱up'

},
{
	id:'3',
	name:'美枣王小红书种草文案',
	time:'2023/8/23 11:11:44',
	person:'阿谱up'
},
{
	id:'4',
	name:'美枣王快手直播话术v3',
	time:'2023/8/22 09:37:02',
	person:'阿谱up'
},
{
	id:'5',
	name:'美枣王快手直播话术v2',
	time:'2023/8/20 11:31:02',
	person:'阿谱up'
},
{
	id:'6',
	name:'添美猕猴桃直播话术稿',
	time:'2023/8/20 09:26:41',
	person:'阿谱up'
},

]
/* const tableData = ref<TableItem[]>([]); */
const pageTotal = ref(0);
// 获取表格数据
/* const getData = () => {
	fetchData().then(res => {
		tableData = res.data.list;
		pageTotal.value = res.data.pageTotal || 50;
	});
}; */
/* getData(); */

// 查询操作
const handleSearch = () => {
	query.pageIndex = 1;
};
// 分页导航
const handlePageChange = (val: number) => {
	query.pageIndex = val;
};

// 删除操作
const handleDelete = (index: number) => {
	// 二次确认删除
	ElMessageBox.confirm('确定要删除吗？', '提示', {
		type: 'warning'
	})
		.then(() => {
			ElMessage.success('删除成功');
			tableData.splice(index, 1);
		})
		.catch(() => {});
};

// 表格编辑时弹窗和保存
const editVisible = ref(false);
let form = reactive({
	name: '',
	person: ''
});
let idx: number = -1;
const handleEdit = (index: number, row: any) => {
	idx = index;
	form.name = row.name;
	form.person = row.person;
	editVisible.value = true;
};
const saveEdit = () => {
	editVisible.value = false;
	ElMessage.success(`修改第 ${idx + 1} 行成功`);
	tableData[idx].name = form.name;
	tableData[idx].person = form.person;
};
</script>

<style  module>
.handle-box {
	margin-bottom: 20px;
}

.handle-select {
	width: 120px;
}

.handle-input {
	width: 300px;
}
.table {
	width: 100%;
	font-size: 14px;
}
.red {
	color: #F56C6C;
}
.mr10 {
	margin-right: 10px;
}
.table-td-thumb {
	display: block;
	margin: auto;
	width: 40px;
	height: 40px;
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>
<style lang="scss">

</style>
